<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored ="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index page</title>
    <%@include file="common.jsp"%>
    <style type="text/css">
        .cale-body tr td{
            border-bottom:1px solid #eee;
            margin-bottom:1px;
        }
        .cale-body tr td .day-num{
            border-top:4px solid transparent;
            font-size:20px;
            color:#767676;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" id="topNav">
    <div class="container-fluid">
        <h1>Hello, Deam team.</h1>
    </div>
</nav>
<div class="container" id="content">
    <div class="row">
        <div class="col-md-7">
            <table width="100%">
                <thead id="cale-title" class="cale-title">
                    <tr>
                         <th>日</th>
                         <th>一</th>
                         <th>二</th>
                         <th>三</th>
                         <th>四</th>
                         <th>五</th>
                         <th>六</th>
                    </tr>
                </thead>
                <tbody id="cale-body" class="cale-body">
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    //当前事件
    var date = new Date();
    //当前年
    var year=date.getFullYear();
    //当前月
    var month = date.getMonth();
    //当前天
    var day = date.getDate();
    //每月天数数组
    var m_days=new Array(31,28+is_leap(year),31,30,31,30,31,31,30,31,30,31);
    //当月天数
    var currMonthDay = m_days[month];

    $(function () {
        //当月1号
        var firstDayDate = new Date(year,month,1);
        //1号周几
        var firstDay = firstDayDate.getDay();
        consolePrint(firstDay);
        //当月是多少行
        var rows= Math.ceil((currMonthDay + firstDay)/7);

        for(i=0;i<rows;i++) { //表格的行
            $("#cale-body").append("<tr row='"+i+"'>");
            for(k=0;k<7;k++) { //表格每行的单元格
                var idx=i*7+k; //单元格自然序列号
                var date_str=idx-firstDay+1; //计算日期
                (date_str<=0 || date_str>currMonthDay) ? date_str=" " : date_str=idx-firstDay+1; //过滤无效日期（小于等于零的、大于月总天数的）
                $("#cale-body tr[row='"+i+"']").append("<td day='"+date_str+"'><p class='day-num'>"+date_str+"</p></td>");
            }
            $("#cale-body").append("</tr>");
        }
        $("#cale-body tr td[day='"+day+"'] .day-num").css({"border-top-color":"#0072c6","color":"#0078D7"});
    });

    function is_leap(year) {
        return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
    }

    function consolePrint(str){
        console.log(str);
    }

</script>
</body>
</html>
